<template>
  <scroll-view
    class="history-box"
    scroll-y
    :scroll-into-view="curScrollIntoViewId"
    :scroll-with-animation="true"
  >
    <view
      class="history-item"
      :id="item.scrollIntoViewId"
      v-for="(item, index) in formatHistoryList"
      :key="index"
    >
      <view class="history-item__exp ellipsis">{{ item.expression }}</view>
      <view class="history-item__result ellipsis">{{ item.result }}</view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { useCalculatorStore } from '@/store/calculator'

const calculatorStore = useCalculatorStore()

const curScrollIntoViewId = ref('')

const formatHistoryList = computed(() => {
  return calculatorStore.historyList.map((item, index) => {
    return {
      ...item,
      scrollIntoViewId: `scrollIntoView_${index + 1}`,
    }
  })
})

watch(
  () => formatHistoryList.value,
  () => {
    console.log(
      '%c [ watch ]-42',
      'font-size:13px; background:pink; color:#bf2c9f;',
      formatHistoryList.value,
    )
    curScrollIntoViewId.value = `scrollIntoView_${formatHistoryList.value.length}`
  },
  {
    immediate: true,
    deep: true,
  },
)
</script>

<style lang="scss" scoped>
.history-box {
  box-sizing: border-box;
  width: 100%;
  height: 360rpx;
  padding: 0 32rpx;
}

.history-item {
  width: 100%;
  padding: 16rpx 0 32rpx;
  border-bottom: 1px solid #ebebeb;

  &:last-child {
    border-bottom: none;
  }

  .history-item__exp,
  .history-item__result {
    width: 100%;
    text-align: right;
  }

  .history-item__exp {
    font-size: 26rpx;
    color: #888;
  }

  .history-item__result {
    font-size: 36rpx;
    color: #333;
  }
}
</style>
